import type { ProFormColumnsType } from '@/components/Pro';
import { BetaSchemaForm } from '@/components/Pro';
import { sysOrgControllerAdd as addOrag } from '@/services/ess/sysOrg';
import { Button, message } from 'antd';
import React from 'react';
import { useAccess, useIntl } from 'umi';

interface addProps {
  handleAddSubmit: (data: any) => void;
}

const AddModal: React.FC<addProps> = (props) => {
  const { handleAddSubmit } = props;
  const access = useAccess();
  const intl = useIntl();
  const columns: ProFormColumnsType<API.OrgForm>[] = [
    {
      title: '',
      valueType: 'group',
      key: 'group1',
      colProps: { md: 24 },
      columns: [
        {
          title: intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.organizationName',
          }),
          key: 'orgName',
          colProps: { md: 12 },
          valueType: 'text',
          dataIndex: 'orgName',
          formItemProps: {
            rules: [
              {
                required: true,
                message: intl.formatMessage({
                  id: 'systemManagement.organizationalManagementMenu.pleaseEnterTheOrganizationName',
                }),
              },
            ],
          },
        },
        {
          title: intl.formatMessage({
            id: 'systemManagement.organizationalManagementMenu.remarksDescription',
          }),
          key: 'remark',
          dataIndex: 'remark',
          valueType: 'textarea',
          colProps: { md: 24 },
          fieldProps: {
            placeholder: intl.formatMessage({ id: 'systemManagement.neddTochange.than120' }),
            maxLength: 120,
          },
        },
      ],
    },
  ];

  const addDefaultValue = {
    orgName: '',
    remark: '',
  };

  return (
    <BetaSchemaForm<API.OrgForm>
      title={intl.formatMessage({ id: 'systemManagement.organizationalManagementMenu.addOrg' })}
      grid={true}
      labelCol={{
        flex: `0 0 100px`,
      }}
      colProps={{ md: 12 }}
      layoutType="ModalForm"
      trigger={
        access.can('sys:org:add') && (
          <Button type="primary" size="middle" style={{ paddingInline: 15 }}>
            {intl.formatMessage({ id: 'systemManagement.organizationalManagementMenu.addOrg' })}
          </Button>
        )
      }
      layout="horizontal"
      columns={columns}
      initialValues={addDefaultValue}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={100}
      onFinish={async (values) => {
        let result = await addOrag({ ...values });
        if (result.success) {
          message.success(
            intl.formatMessage({ id: 'systemManagement.neddTochange.orgMainSuccess' }),
          );
          handleAddSubmit(result);
        }

        return true;
      }}
    ></BetaSchemaForm>
  );
};

export default AddModal;
